<template>
  <Card>
    <vxe-toolbar>
      <template #buttons>
        <div class="btn-group">
          <Button type="primary" icon="md-add" @click="handleAdd" v-preventReClick v-perms="['role/add']">新增</Button>
        </div>
      </template>
    </vxe-toolbar>

    <vxe-table
        style="margin-top: 20px"
        align="center"
        border
        :column-config="{resize:true}"
        :data="tableRoleData">
      <vxe-column field="id" title="ID"/>
      <vxe-column field="name" title="名称"/>
      <vxe-column field="depict" title="备注"/>
      <vxe-column field="sort" title="排序"/>
      <vxe-column field="number" title="管理员人数"/>
      <vxe-column field="create_time" title="创建时间" width="200"/>
      <vxe-column title="操作" width="200">
        <template #default="{row}">
          <Tag color="#2db7f5" size="medium" style="cursor:pointer;" @click="handleEdit(row)" v-preventReClick
               v-perms="['role/edit']">编辑
          </Tag>
          <Tag color="#19be6b" size="medium" style="cursor:pointer;" @click="grantAuth(row)" v-preventReClick
               v-perms="['role/grant_auth']">分配权限
          </Tag>
          <Tag color="error" size="medium" style="cursor:pointer;" @click="delRoleInfoById(row)" v-preventReClick
               v-perms="['role/del']">删除
          </Tag>
        </template>
      </vxe-column>
    </vxe-table>

    <Modal
        v-model="roleEditShow"
        :title="roleTitle"
        :footer-hide="true"
        width="38%">
      <RoleEdit ref="roleEditRef" v-if="roleEditShow"></RoleEdit>
      <div slot="footer" style="display: flex;justify-content:right;margin-top: -10px" class="btn-group">
        <Button type="default" @click="cancelRoleEdit">取消</Button>
        <Button type="primary" @click="addRole">确定</Button>
      </div>
    </Modal>

    <Modal
        v-model="authEditShow"
        title="分配角色"
        :footer-hide="true"
        width="38%">
      <RoleAuth ref="authEditRef" v-if="authEditShow"></RoleAuth>
      <div slot="footer" style="display: flex;justify-content:right;margin-top: -10px" class="btn-group">
        <Button type="default" @click="cancelAuthEdit" v-preventReClick>取消</Button>
        <Button type="primary" @click="grantAuthConfirm" v-preventReClick>确定</Button>
      </div>
    </Modal>
  </Card>
</template>

<script setup>

import {getCurrentInstance, nextTick, ref} from "vue";
import {RoleService} from "@/api/role";
import RoleEdit from "@/components/permission/role-edit";
import RoleAuth from "@/components/permission/role-auth";

const tableRoleData = ref([]);

const roleEditShow = ref(false);

const roleTitle = ref('添加角色');

const authEditShow = ref(false);

const {proxy} = getCurrentInstance();

const getRoleList = async () => {
  const {data} = await RoleService.GetRoleList();
  tableRoleData.value = data.data
}

const handleAdd = async () => {
  roleEditShow.value = true;
  await nextTick();
  proxy.$refs.roleEditRef.mode = 'add'
}

const cancelRoleEdit = () => {
  roleEditShow.value = false;
}

const addRole = () => {
  proxy.$refs.roleEditRef.addRoleData();
}

const handleEdit = async (e) => {
  roleTitle.value = '编辑角色';
  roleEditShow.value = true;
  await nextTick();
  proxy.$refs.roleEditRef.mode = 'edit';
  await proxy.$refs.roleEditRef.getDetail(e)
}

const grantAuth = async (e) => {
  console.log(e)
  authEditShow.value = true;
  await nextTick();
  proxy.$refs.authEditRef.roleId = e.id;
  await proxy.$refs.authEditRef.setTreeData();
}

const cancelAuthEdit = () => {
  authEditShow.value = false;
}

const grantAuthConfirm = async () => {
  await proxy.$refs.authEditRef.grantAuth();
}

const delRoleInfoById = async (e) => {
  console.log(e)
  let param = {id: e.id};
  proxy.$Modal.confirm({
    title: '删除操作确认',
    content: '<p>确定执行删除操作?执行成功后数据将不可恢复。</p>',
    onOk: () => {
      postDel(param);
    },
    onCancel: () => {
      return;
    }
  })
}

const postDel = async (param) => {
  const {data} = await RoleService.DeleteRoleById(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        // CommonServices.getMenus();
        window.location.reload()
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject()
      }
    })
  }
}

getRoleList()

</script>

<style scoped lang="less">

@import "./role.less";
</style>
